<script setup lang="ts">
import { reactive } from "vue";
import { SelectOutlined } from "@ant-design/icons-vue";
import { BaseApi } from "@/apis/base.api";
import { Modal } from "ant-design-vue";
import { useWebxRouteTabs } from "@webxue/vue3-antdv-ui";
import useUser from "@/hooks/useUser";
import useCusRouter from "@/hooks/useCusRouter";

const { router } = useCusRouter();
const { addParentTab } = useWebxRouteTabs({ router });
const developerInfo = reactive({
  content:`<h1>开发者须知</h1>`,
  apply(){
    Modal.confirm({
      title:"温馨提示",
      content:"确定要申请开发者权限吗？",
      async onOk(){
        const response = await BaseApi.developer.save({});
        if(response.success) {
          await useUser().refresh();
          addParentTab();
        }
      }
    })
  }
})
</script>

<template>
  <div class="bg-white rounded p-4 flex flex-col gap-2">
    <div class="text-center text-2xl">开发者须知</div>
    <div v-html="developerInfo.content"></div>
    <div class="flex gap-2 justify-center">
      <AButton>取消</AButton>
      <AButton type="primary" @click="developerInfo.apply"><SelectOutlined /> 申请</AButton>
    </div>
  </div>
</template>

<style scoped lang="less"></style>